<%--
  Created by IntelliJ IDEA.
  User: 天天好心情
  Date: 2024/10/22
  Time: 16:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>员工信息页面</title>
    <%--引入vue--%>
    <script src="../js/vue.js"></script>
    <%--引入axios--%>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>

</head>
<body>
<div id="app">
    <%--根据关键字查询--%>
    <el-form :inline="true" :model="selectForm" class="demo-form-inline">
        <el-form-item label="编号">
            <el-input v-model="selectForm.staffid" placeholder="请输入员工编号"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
            <el-input v-model="selectForm.staffname" placeholder="请输入员工姓名"></el-input>
        </el-form-item>
        <el-form-item label="选择分店">
            <el-select v-model="selectForm.branchid" placeholder="请选择">
                <el-option v-for="b in branchList" :label="b.branchname" :value="b.branchid"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询<i class="el-icon-search el-icon--right"></i></el-button>
            <el-button type="primary" @click="refresh">刷新<i class="el-icon-refresh el-icon--right"></i></el-button>
        </el-form-item>
    </el-form>
    <%--添加按钮--%>
    <el-button type="success" round @click="dialogVisible = true">添加<i
            class="el-icon-circle-plus-outline el-icon--right"></i></el-button>
    <%--主页面 展示所有--%>
    <template>
        <el-table
                :data="staffInfo"
                border
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <el-table-column
                    prop="staffid"
                    label="员工编号"
            >
            </el-table-column>
            <el-table-column
                    prop="staffname"
                    label="员工姓名"
            >
            </el-table-column>
            <el-table-column
                    prop="idcard"
                    label="身份证号码">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="电话号码">
            </el-table-column>
            <el-table-column
                    prop="entrytime"
                    label="入职日期">
            </el-table-column>
            <el-table-column
                    prop="branch.branchname"
                    label="店名">
            </el-table-column>
            <el-table-column
                    prop="role.rolename"
                    label="职位名称">
            </el-table-column>
            <el-table-column
                    prop="department.deptname"
                    label="部门名称">
            </el-table-column>
            <el-table-column
                    prop="department.remark"
                    label="职务描述">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    prop="state"
                    label="状态"
                    width="120">
                <template slot-scope="scope">
                    <%--if判断0为离职，1为在职，2为冻结--%>
                    <el-tag
                            v-if="scope.row.state==0"
                            type="danger"
                            effect="dark">
                        离职状态
                    </el-tag>
                    <el-tag
                            v-else-if="scope.row.state==1"
                            type="success"
                            effect="dark">
                        在职状态
                    </el-tag>
                    <el-tag
                            v-else-if="scope.row.state==2"
                            type="info"
                            effect="dark">
                        冻结状态
                    </el-tag>
                    <%-- <el-tag
                             v-if="scope.row.state==1"
                             type="success"
                             effect="dark">
                         工作状态
                     </el-tag>
                     <el-tag
                             v-else
                             type="info"
                             effect="dark">
                         冻结状态
                     </el-tag>--%>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="400">
                <template slot-scope="scope">
                    <div v-if="scope.row.branchid==12138 && scope.row.roleid==1"
                         style="text-align: center;color: black;font-size: 21px;font-weight:999">大&nbsp;&nbsp;老&nbsp;&nbsp;板
                    </div>
                    <span v-else>
                    <el-button size="small" type="success " @click="update(scope.row.id)" round>编辑
                        <i class="el-icon-edit el-icon--right"></i>
                    </el-button>
                    <el-button size="small" type="warning" @click="mobilize(scope.row)" round>调动
                        <i class="el-icon-refresh-left el-icon--right"></i>
                    </el-button>
                    <el-button size="small" type="danger" @click="departure(scope.row)" round>离职
                        <i class="el-icon-delete el-icon--right"></i>
                    </el-button>
                    <%--判断如果状态码为1显示冻结按钮，为切换解冻按钮--%>
                        <span v-if="scope.row.state==1">
                            <el-button size="small" type="primary" @click="freeze(scope.row)" round>
                                冻结<i class="el-icon-switch-button el-icon--right"></i>
                            </el-button>
                        </span>
                        <span v-else-if="scope.row.state==2">
                            <el-button size="small" type="info" @click="freeze(scope.row)" round>
                                解冻<i class="el-icon-switch-button el-icon--right"></i>
                            </el-button>
                        </span>

                    </span>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <%--分页--%>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5,10,15,20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
<%--==================================================添加的对话框=====================================================--%>
    <el-dialog
            title="添加员工"
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleClose"
            @closed="closeAdd">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="头像" prop="url">
                <el-upload
                        class="avatar-uploader"
                        action="/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="工号" prop="staffid">
                <el-input v-model="form.staffid"></el-input>
            </el-form-item>
            <el-form-item label="员工名称" prop="staffname">
                <el-input v-model="form.staffname"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="idcard">
                <el-input v-model="form.idcard"></el-input>
            </el-form-item>
            <el-form-item label="员工住址" prop="address">
                <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="phone">
                <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="入职时间" prop="entrytime">
                <el-date-picker
                        v-model="form.entrytime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="门店店名" prop="branchid">
                <el-select v-model="form.branchid" placeholder="--门店--">
                    <el-option v-for="b in branchList" :label="b.branchname" :value="b.branchid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="部门名称" prop="deptid">
                <el-select v-model="form.deptid" placeholder="--部门--">
                    <el-option v-for="d in deptList" :label="d.deptname" :value="d.deptid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="权限" prop="roleid">
                <el-select v-model="form.roleid" placeholder="--权限--">
                    <el-option v-for="r in roleList" v-if="r.roleid!=1" :label="r.rolename"
                               :value="r.roleid"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="okAdd">确 定</el-button>
  </span>
    </el-dialog>
<%--==================================================修改的对话框=====================================================--%>
    <el-dialog title="修改员工" :visible.sync="editDialogFormVisible" width="40%">
        <%--
            el-form:表示el的表单元素
               :model 绑定表单数据对象
               lable-width: 表单标签的宽度
               rules: 表单验证规则
        --%>
        <el-form :model="editform" label-width="100px" :rules="rules" ref="editform">
            <el-form-item label="头像:" prop="url">
                <%--
                   el-upload: 表单上传组件
                     action: 上传地址
                     show-file-list: 是否显示文件列表
                     on-success: 上传成功回调
                     before-upload: 上传前回调
                --%>
                <el-upload
                        class="avatar-uploader"
                        action="/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="工号:">
                <el-input v-model="editform.staffid" autocomplete="off" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="员工名称:" prop="staffname">
                <el-input v-model="editform.staffname" autocomplete="off" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="身份证号:">
                <el-input v-model="editform.idcard" autocomplete="off" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="员工住址:" prop="address">
                <el-input v-model="editform.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系方式:" prop="phone2">
                <el-input v-model="editform.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="入职日期:" prop="entrytime">
                <el-date-picker
                        v-model="editform.entrytime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期时间" :readonly="true">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="门店名称:">
                <el-select v-model="editform.branchid" placeholder="--门店--" disabled>
                    <el-option v-for="b in branchList" :label="b.branchname" :value="b.branchid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="部门名称:">
                <el-select v-model="editform.deptid" placeholder="--部门--" disabled>
                    <el-option v-for="d in deptList" :label="d.deptname" :value="d.deptid" ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="权限:">
                <el-select v-model="editform.roleid" placeholder="--权限--" disabled>
                    <el-option v-for="r in roleList" v-if="r.roleid!=1" :label="r.rolename" :value="r.roleid"></el-option>
                </el-select>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="editDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmEdit()">确 定</el-button>
        </div>
    </el-dialog>
<%--=================================================调动员工的对话框===================================================--%>
    <el-dialog title="调动员工" :visible.sync="mobilizeDialogFormVisible" width="40%">
        <el-form :model="mobilizeform" label-width="100px" :rules="rules" ref="mobilizeform">
            <el-form-item label="员工编号:">
                <el-input v-model="mobilizeform.staffid" autocomplete="off" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="员工姓名:">
                <el-input v-model="mobilizeform.staffname" autocomplete="off" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="旧店名称:">
                <el-input v-model="mobilizeform.branch==undefined?'':mobilizeform.branch.branchname" :disabled="true"></el-input>
            </el-form-item>
            <!--
                  选择框组件，用于选择部门
                  使用v-model绑定选择值到mobilizeform对象的department属性上
                  若department属性为undefined，则显示空字符串，否则显示department的deptname属性
                  设置placeholder为"--部门--"，表示未选择时的提示文本
                  设置disabled属性，使选择框处于禁用状态，防止用户修改
               -->
            <el-form-item label="旧部门名:">
                <el-select v-model="mobilizeform.department==undefined?'' :mobilizeform.department.deptname" placeholder="--部门--" disabled></el-select>
            </el-form-item>
           <%-- <el-form-item label="旧职位:">
                <el-select v-model="mobilizeform.role==undefined?'':mobilizeform.role.roleid" placeholder="--权限--" disabled>
                </el-select>
            </el-form-item>--%>
            <el-form-item label="新店名称:">
                <el-select v-model="mobilizeform.newbranchname" placeholder="--门店--">
                    <el-option v-for="b in branchList" :label="b.branchname" :value="b.branchid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="新部门名:">
                <el-select v-model="mobilizeform.newdeptname" placeholder="--部门--">
                    <el-option v-for="d in deptList" :label="d.deptname" :value="d.deptid"></el-option>
                </el-select>
            </el-form-item>
            <%--<el-form-item label="新职位:">
                <el-select v-model="mobilizeform.newrolename" placeholder="--职位--">
                    <el-option v-for="r in roleList" v-if="r.roleid!=1" :label="r.rolename" :value="r.roleid"></el-option>
                </el-select>
            </el-form-item>--%>
            <el-form-item>
                <el-button type="primary" @click="confirmMobilize()">立即提交</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<%--=======================================================js代码===================================================--%>
<script>
    // 员工编号的自定义校验
    var checkStaffid = (rule, value, callback) => {
        if (!value) {
            return callback(new Error('员工编号不能为空'));
        }
        setTimeout(() => {
            //判断唯一
            axios.get("/staffInfo/checkStaffid?staffid=" + value).then(resp => {
                if (resp.data.code === 500) {
                    callback(new Error('员工编号已存在'));
                } else {
                    callback();
                }
            })
        }, 10);
    }
    // 身份证号码的自定义校验
    var checkIdcard = (rule, value, callback) => {
        if (!value) {
            return callback(new Error('身份证号码不能为空'));
        }
        setTimeout(() => {
            //判断唯一
            axios.get("/staffInfo/checkIdcard?idcard=" + value).then(resp => {
                if (resp.data.code === 500) {
                    callback(new Error('身份证号码已存在'));
                } else {
                    callback();
                }
            })
        }, 10);
    }
    // 手机号的自定义校验
    var checkPhone = (rule, value, callback) => {
        if (!value) {
            return callback(new Error('手机号不能为空'));
        }
        setTimeout(() => {
            //判断唯一
            axios.get("/staffInfo/checkPhone?phone=" + value).then(resp => {
                console.log(resp);
                if (resp.data.code === 500) {
                    callback(new Error('手机号已存在'));
                } else {
                    callback();
                }
            })
        }, 10);
    }
    let app = new Vue({
        el: "#app",
        data: {
            staffInfo: undefined,//员工信息
            branchList: undefined,//分店信息
            roleList: undefined,//职位信息
            deptList: undefined,//部门信息
            selectForm: {},//查询条件
            currentPage: 1,//当前页码
            pageSize: 5,//每页显示条数
            total: 0,//总条数
            dialogVisible: false,//显示添加员工对话框
            form: {},//添加员工表单数据
            imageUrl: '', //表示文件上传成功后的路径。
            editform: {},//修改员工表单数据
            editDialogFormVisible: false,//显示修改员工对话框
            //调动员工表单数据
            mobilizeform: {
                branch: {},
                department: {},
                newbranchname: '',
                newdeptname: '',

            },
            mobilizeDialogFormVisible: false,//显示调动员工对话框
            // 表单验证规则
            rules: {
                url: [
                    {required: true, message: '请输入员工头像', trigger: 'blur'}
                ],
                staffid: [
                    {validator: checkStaffid, trigger: 'blur'}
                ],
                staffname: [
                    {required: true, message: '员工姓名不能为空', trigger: 'blur'},
                    {min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '密码不能为空', trigger: 'blur'},
                    {min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur'}
                ],
                idcard: [
                    {validator: checkIdcard, trigger: 'blur'},
                    {required: true, message: '身份证号不能为空!'},
                    {type: 'string', message: '身份号必须为数字'},
                    {
                        pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
                        message: '不是合法的身份证号！', trigger: 'blur'
                    }
                ],
                address: [
                    {required: true, message: '员工地址不能为空', trigger: 'blur'},
                    {min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur'},
                ],
                phone: [
                    {validator: checkPhone, trigger: 'blur'},
                    {required: true, message: '手机号不能为空!', trigger: 'blur'},
                    {type: 'string', message: '手机号必须为数字'},
                    {min: 11, max: 11, message: '长度只能为11个字符', trigger: 'blur'},
                    {pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur'},
                ],
                phone2: [
                    {type: 'string', message: '手机号必须为数字'},
                    {min: 11, max: 11, message: '长度只能为11个字符', trigger: 'blur'},
                    {pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur'},
                ],
                entrytime: [
                    {required: true, message: '请输入入职时间', trigger: 'blur'},
                ],
                branchid: [
                    {required: true, message: '请选择所属分店', trigger: 'blur'},
                ],
                roleid: [
                    {required: true, message: '请选择职位', trigger: 'blur'},
                ],
                diptid: [
                    {required: true, message: '请选择部门', trigger: 'blur'},
                ]
            },
        },
        created() {
            this.loadAll();
            this.loadBranch();
            this.loadRole();
            this.loadDept();
        },
        methods: {
            //冻结
            freeze(row) {
                // 检查员工角色，如果为店长，则显示错误消息并返回
                if (row.roleid === 1 && this.staffInfo.staffid != 111) {
                    this.$message.error("店长不能冻结!!!");
                    return;
                }
                if (row.state === 1) {
                    // 确认冻结操作
                    this.$confirm('确定冻结该员工吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.get("/staffInfo/freeze?id=" + row.id).then(resp => {
                            //判断是否成功冻结
                            if (resp.data.code === 200) {
                                this.$message.success("冻结成功!");
                                this.loadAll();//重新加载员工信息
                            } else {
                                this.$message.error("冻结失败!");
                            }
                        })
                    }).catch(() => {
                        this.$message.info('已取消冻结');
                    })
                    return;
                } else if (row.state === 2) {
                    // 确认解冻操作
                    this.$confirm('确定解冻该员工吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.get("/staffInfo/freeze?id=" + row.id).then(resp => {
                            //判断是否成功解冻
                            if (resp.data.code === 200) {
                                this.$message.success("解冻成功!");
                                this.loadAll();//重新加载员工信息
                            }
                        })
                    }).catch(() => {
                        this.$message.info('已取消解冻');
                    })
                }
            },
            //离职按钮
            departure(row) {
                // 检查员工角色，如果为店长，则显示错误消息并返回
                if (row.roleid === 1) {
                    this.$message.error("店长不能直接离职，请到店铺管理中更改!!!");
                    return;
                }
                // 确认离职操作
                this.$confirm('确定离职该员工吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get("/staffInfo/lizhi?id=" + row.id).then(resp => {
                        //判断是否成功离职
                        if (resp.data.code === 200) {
                            this.$message.success("离职成功!");
                            this.loadAll();//重新加载员工信息
                        } else {
                            this.$message.error("离职失败!");
                        }
                    })
                }).catch(() => {
                    this.$message.info('已取消离职');
                    return;
                })
            },
            //调动弹出框
            mobilize(row) {
                //判断该员工是否正在调动
                axios.get("/staffInfo/selectStafftransferState?staffid=" + row.staffid).then(resp => {
                    if (resp.data.code === 500){//500代表正在调动
                        this.$message({
                            type: 'warning',
                            message: '该员工正在调动 !'
                        });
                    }else {
                        if (row.roleid === 1) {
                            this.$message.error("店长不能调动 !");
                            return;
                        } else {
                            this.mobilizeform = row;//将当前行数据赋值给mobilizeform
                            this.mobilizeDialogFormVisible = true;
                        }
                    }
                })
            },
            //调动提交
            confirmMobilize() {
                axios.put("/staffInfo/mobilizestaff", this.mobilizeform).then(resp => {
                    if (resp.data.code === 200) {
                        this.$message.success("提交成功,待审核");
                        this.loadAll();//重新加载员工信息
                    } else {
                        this.$message.error("调动失败");
                    }
                    this.mobilizeDialogFormVisible = false;
                })
            },
            // 确认编辑用户信息的方法
            confirmEdit() {
                this.$refs.editform.validate(valid => {
                    if (valid) {
                        // 使用axios发送PUT请求更新用户信息
                        axios.put("/staffInfo/update", this.editform).then(resp => {
                            // 成功时，显示成功通知
                            this.$notify({
                                title: '成功',
                                message: resp.data.msg,
                                type: 'success'
                            });
                            // 更新用户列表
                            this.loadAll();
                            //关闭对话框
                            this.editDialogFormVisible = false;
                        })
                    }
                })
            },
            //数据回显
            update(id) {
                this.editDialogFormVisible = true;//显示编辑对话框
                axios.get("/staffInfo/getStaffById?id=" + id).then(resp => {
                    this.editform = resp.data.data;//将用户信息赋值给editform
                    this.imageUrl = this.editform.url;//把数据库的图片路径赋值给表单的头像
                })
            },
            // 确认添加员工
            /**
             * 添加员工确认函数
             * 此函数在用户点击添加员工对话框的确认按钮时调用
             * 它首先验证表单数据的合法性，然后发送POST请求到服务器以添加新员工
             */
            okAdd() {
                // 调用表单的validate方法进行表单验证
                this.$refs.form.validate(valid => {
                    // 如果表单验证通过
                    if (valid) {
                        // 使用axios发送POST请求到服务器，请求添加新员工
                        axios.post("/staffInfo/addStaff", this.form).then(resp => {
                            // 根据服务器返回的数据判断添加是否成功
                            if (resp.data.code === 200) {
                                // 如果添加成功，显示成功消息，关闭对话框，并重新加载所有员工数据
                                this.$message({
                                    type: 'success',
                                    message: '添加员工成功!'
                                });
                                this.dialogVisible = false;
                                this.loadAll();
                            } else {
                                // 如果添加失败，显示错误消息
                                this.$message({
                                    type: 'error',
                                    message: resp.data.msg
                                })
                            }
                        })
                    }
                })
            },
            //四表联查询
            loadAll() {
                axios.post("/staffInfo/getStaffInfo?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize, this.selectForm).then(resp => {
                    this.staffInfo = resp.data.data.list;
                    this.total = resp.data.data.total;
                })
            },
            //表格中行的样式
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 4 === 1) {
                    return 'warning-row';
                } else if (rowIndex % 4 === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 每页条数
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadAll();
            },
            // 页码
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadAll();
            },
            //显示所有的分店名字
            loadBranch() {
                axios.get("/branch/getBranchName").then(resp => {
                    this.branchList = resp.data.data;
                })
            },
            //显示所有的职位名字
            loadRole() {
                axios.get("/role/getAll").then(resp => {
                    this.roleList = resp.data.data;
                })
            },
            //显示所有的部门名字
            loadDept() {
                axios.get("/dept/getAll").then(resp => {
                    this.deptList = resp.data.data;
                })
            },
            // 关闭对话框
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            // 上传图片
            handleAvatarSuccess(res, file) {
                this.imageUrl = res.data;
                this.form.url = this.imageUrl;
            },
            // 上传图片限制
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG或png或jpg或gif 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            //表单重置
            closeAdd() {
                this.$refs.form.resetFields();
                this.imageUrl = '';
            },
            // 查询
            onSubmit() {
                this.loadAll();
            },
            //刷新
            refresh() {
                this.selectForm = {};//清空查询表单
                this.loadAll();//重新加载数据
            }
        }
    })
</script>
</html>
